<template>
  <div class="header">
    <div class="whiteclouds">
      <div style="padding: 20px 20px">
        <div>
          <img class="image" src="@/assets/image/statistics/police.png" />
          <span style="font-size: 15px">&emsp;吴金玉</span>
        </div>
        <a-row class="situation">
          <a-col class="bor" :span="8">
            <div class="title">今日警情</div>
            <div style="font-size: 12px">大约延时9分钟</div>
            <div>
              <span class="num">{{ caseNumList.count }}</span>
              起
            </div>
          </a-col>
          <a-col class="bor" :span="8">
            <a-row>
              <a-col :span="12">
                <div class="title">昨日警情</div>
                <div style="font-size: 12px">(24小时)</div>
                <div>
                  <span class="num">{{ caseNumList.lastCount }}</span>
                  起
                </div>
              </a-col>
              <a-col :span="12">
                <br />
                <div>同比：{{ caseNumList.chainRatio }}</div>
                <div>环比：{{ caseNumList.yoyRatio }}</div>
                <br />
                <div>刑事：{{ caseNumList.xsCount }}</div>
                <div>治安：{{ caseNumList.zaCount }}</div>
              </a-col>
            </a-row>
          </a-col>
          <a-col class="bor" :span="8">
            <div class="title">待处理工作</div>
            <div v-if="countList.countNoApply">
              {{ countList.countNoApply }}个新建流转单未发送审批。
            </div>
            <div v-if="countList.countNoFinish">
              {{ countList.countNoFinish }}个需要确认流转单。
            </div>
            <div v-if="countList.countThisWeekEnd">
              本周有{{ countList.countThisWeekEnd }}个反馈流转单到期。
            </div>
            <div>
              <span v-if="caseNumList.xsCount || caseNumList.zaCount">昨日</span>
              <span v-if="caseNumList.xsCount">刑事警情{{ caseNumList.xsCount }}起</span>
              <span v-if="caseNumList.xsCount && caseNumList.zaCount">，</span>
              <span v-if="caseNumList.zaCount">治安警情{{ caseNumList.zaCount }}起。</span>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="layer2">
        <a-button class="introduce" @click="showModal">五里冲派出所介绍</a-button>
      </div>
    </div>
  </div>
  <a-row :gutter="10" style="margin-top: 20px">
    <a-col :span="16">
      <a-card style="height: 350px" size="small">
        <template #title>乱点警情统计</template>
        <template #extra><a @click="ldClick">更多>></a></template>
        <a-row :gutter="10">
          <div v-if="ldInfoList.length > 0">
            <a-col v-for="item in ldInfoList" :key="item.securityNo" :span="8">
              <a-card size="small" style="height: 290px">
                <template #title>{{ item.securityName }}</template>
                <bar
                  :data="item.classifyTop5List"
                  type="传统"
                  :height="240"
                  :fieldNames="{
                    name: 'name',
                    value: 'value',
                  }"
                />
              </a-card>
            </a-col>
          </div>
          <a-empty style="margin: 50px auto" v-else />
        </a-row>
      </a-card>
    </a-col>
    <a-col :span="8">
      <a-card size="small" class="information">
        <template #title>预警信息</template>
        <template #extra><a @click="yjClick">更多>></a></template>
        <div v-if="resultList.length > 0">
          <div v-for="item in resultList" class="informationai">
            <span
              class="iconfont iconPosition"
              :class="
                item.classifyType == 1
                  ? 'icon-AIjiaobiao'
                  : item.classifyType == 2
                  ? 'icon-jiejingjiaobiao'
                  : 'icon-fankuijiaobiao'
              "
            ></span>
            <div style="display: flex; justify-content: space-between; margin-left: 30px">
              <div style="cursor: pointer" @click="xqClick(item.modelId)">{{ item.modelName }}</div>
              <div style="font-size: 12px">{{ item.createTime.split(' ')[0] }}预警</div>
            </div>
            <div v-for="(item, index) in item.rule" :key="index" style="margin-top: 5px">
              <div v-if="index <= 1">
                <span v-if="item.type == 'T'">
                  <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
                  当期发生
                  <span style="color: #60b5ff">{{ item.dqNum }}</span>
                  起,
                  <span style="color: #60b5ff">去年同期</span>
                  发生
                  <span style="color: #60b5ff">{{ item.tqNum }}</span>
                  起,
                  <span style="color: #60b5ff">同比</span>
                  上升
                  <span
                    :class="
                      item.level == '1'
                        ? 'yjhong'
                        : item.level == '2'
                        ? 'yjcheng'
                        : item.level == '3'
                        ? 'yjhuang'
                        : 'yjlan'
                    "
                  >
                    {{ `${item.percent}%` }}
                    <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                    <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                    <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                    <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
                  </span>
                </span>
                <span v-if="item.type == 'H'">
                  <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
                  当期发生
                  <span style="color: #60b5ff">{{ item.dqNum }}</span>
                  起,
                  <span style="color: #60b5ff">环比上期</span>
                  发生
                  <span style="color: #60b5ff">{{ item.tqNum }}</span>
                  起,
                  <span style="color: #60b5ff">环比</span>
                  上升
                  <span
                    :class="
                      item.level == '1'
                        ? 'yjhong'
                        : item.level == '2'
                        ? 'yjcheng'
                        : item.level == '3'
                        ? 'yjhuang'
                        : 'yjlan'
                    "
                  >
                    {{ item.percent }}%
                    <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                    <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                    <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                    <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
                  </span>
                </span>
                <span v-if="item.type == 'N'">
                  <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
                  当期发生
                  <span
                    :class="
                      item.level == '1'
                        ? 'yjhong'
                        : item.level == '2'
                        ? 'yjcheng'
                        : item.level == '3'
                        ? 'yjhuang'
                        : 'yjlan'
                    "
                  >
                    {{ item.dqNum }}
                    <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                    <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                    <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                    <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
                  </span>
                  起
                </span>
              </div>
            </div>
          </div>
        </div>
        <a-empty style="margin: 50px auto" v-else />
      </a-card>
    </a-col>
  </a-row>
  <a-row :gutter="10" style="margin-top: 20px">
    <a-col :span="16">
      <a-card style="height: 300px" size="small">
        <template #title>全年总体警情趋势</template>
        <timeline
          v-if="trendList.length > 0"
          :height="240"
          type="传统"
          :data="trendList"
          :legend="['当前警情', '去年同期']"
          :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum'] }"
        />
        <a-empty style="margin-top: 50px" v-else />
      </a-card>
    </a-col>
    <a-col :span="8">
      <a-card style="height: 300px" size="small">
        <template #title>全年辖区警情统计</template>
        <pie
          v-if="pieChartList.length > 0"
          :data="pieChartList"
          :height="250"
          :fieldNames="{
            name: 'name',
            value: 'caseNum',
          }"
        />
        <a-empty style="margin-top: 50px" v-else />
      </a-card>
    </a-col>
  </a-row>
  <a-modal :footer="null" v-model:visible="visible" title="五里冲派出所介绍" @ok="handleOk">
    <p>{{ remark }}</p>
  </a-modal>
</template>
<script lang="ts">
import { ref, defineComponent, onMounted } from 'vue';
import { systemInfo } from '@/api/user/login';
import {
  queryVaryTrend,
  queryXqdwPieChart,
  querySecurityInfo,
  queryYjCurResultList,
  queryCaseNum,
  count,
} from '@/api/home/index';
import Timeline from '@/components/charts/line/index.vue';
import Pie from '@/components/charts/pie/simple-pie/index.vue';
import Bar from '@/components/charts/bar/index.vue';
import moment from 'moment';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'indexs',
  components: { Timeline, Pie, Bar },
  setup() {
    const visible = ref<boolean>(false);
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const remark = ref<string>();
    const trendList = ref<any>([]);
    const pieChartList = ref<any>([]);
    const ldInfoList = ref<any>([]);
    const resultList = ref<any>([]);
    const caseNumList = ref<any>([]);
    const countList = ref<any>([]);
    const timeParams = ref({
      callTimeStart: moment(moment().format(dateFormat)).subtract(1, 'year').format(dateFormat),
      callTimeEnd: moment().format(dateFormat),
    });
    const infoParams = ref({
      callTimeStart: moment().year() + '-01-01 00:00:00',
      callTimeEnd: moment().format(dateFormat),
      xqdwCodes: '',
      classifyCodes: '',
      callSummaryCodes: '',
      dealSummaryCodes: '',
      securityType: 'dy',
      classifyType: 0,
      showType: 0,
      page: 1,
      size: 3,
      inputType: '',
      inputParams: '',
      searchType: '',
      subdivisionFlag: 'Y',
      trafficFlag: 'N',
      otherFlag: 'N',
    });

    //五里冲派出所介绍
    const getSystemInfo = async () => {
      const res = await systemInfo();
      if (res.code === 200) {
        remark.value = res.data.remark;
      }
    };

    //全年总体警情趋势
    const getQueryVaryTrend = async () => {
      const res = await queryVaryTrend(timeParams.value);
      if (res.code === 200) {
        trendList.value = res.data.dataList;
      }
    };

    //全年辖区警情统计
    const getQueryXqdwPieChart = async () => {
      const res = await queryXqdwPieChart(timeParams.value);
      if (res.code === 200) {
        pieChartList.value = res.data;
      }
    };

    //乱点警情统计
    const getQuerySecurityInfo = async () => {
      const res = await querySecurityInfo(infoParams.value);
      if (res.code === 200) {
        ldInfoList.value = res.data.dataList;
      }
    };

    //预警信息
    const getQueryYjCurResultList = async () => {
      const res = await queryYjCurResultList({ page: 1, size: 3 });
      if (res.code === 200) {
        resultList.value = res.data.details;
      }
    };

    //今日，昨日警情
    const getQueryCaseNum = async () => {
      const params = ref({
        callTimeStart: moment().format('YYYY-MM-DD') + ' 00:00:00',
        callTimeEnd: moment().format(dateFormat),
      });
      const res = await queryCaseNum(params.value);
      if (res.code === 200) {
        caseNumList.value = res.data;
      }
    };

    //待处理工作
    const getCount = async () => {
      const res = await count();
      if (res.code === 200) {
        countList.value = res.data;
      }
    };

    const router = useRouter();
    //跳转乱点列表
    const ldClick = () => {
      router.push({
        path: '/districtMonitoring/address',
      });
    };
    //跳转预警列表
    const yjClick = () => {
      router.push({
        path: '/early-warning/current-alarm',
      });
    };
    //跳转预警详情
    const xqClick = id => {
      router.push({
        path: '/early-warning/current-alarm/detail',
        query: {
          modelId: id,
        },
      });
    };

    const showModal = () => {
      visible.value = true;
      getSystemInfo();
    };
    const handleOk = () => {
      visible.value = false;
    };
    //  方法 - 周期类型数据转换
    const setPeriod = (period: string): string => {
      let s = '';
      switch (period) {
        case 'D':
          s = '日';
          break;
        case 'W':
          s = '周';
          break;
        case 'M':
          s = '月';
          break;
      }
      return s;
    };
    onMounted(() => {
      getQueryVaryTrend();
      getQueryXqdwPieChart();
      getQuerySecurityInfo();
      getQueryYjCurResultList();
      getQueryCaseNum();
      getCount();
    });
    return {
      visible,
      remark,
      trendList,
      pieChartList,
      ldInfoList,
      resultList,
      caseNumList,
      countList,
      //方法
      showModal,
      handleOk,
      setPeriod,
      ldClick,
      yjClick,
      xqClick,
    };
  },
});
</script>
<style lang="less" scoped>
.header {
  height: 250px;
  background: linear-gradient(88deg, #1d2089 0%, #2aa0ef 100%);
  .whiteclouds {
    display: flex;
    justify-content: space-between;
    height: 100%;
    background-image: url(~@/assets/image/statistics/whiteclouds.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 80% 100%;
  }
  .layer2 {
    width: 450px;
    height: 100%;
    padding: 10px;
    background-image: url(~@/assets/image/statistics/layer2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .introduce {
      float: right;
      padding: 5px 10px;
      color: #b9c4dd;
      font-size: 12px;
      background-color: #34363c;
    }
  }
}
.situation {
  width: 800px;
  height: 160px;
  margin-top: 20px;
  background: rgba(8, 20, 84, 0.6);
  border-radius: 4px;
  .title {
    margin-top: 20px;
    color: #fff;
    font-size: 20px;
  }
  .num {
    margin-top: 10px;
    color: #fff;
    font-size: 50px;
  }
  .bor {
    align-items: center;
    width: 0px;
    height: 150px;
    padding-left: 40px;
    border-right: 1px solid #4049a8;
  }
}
.information {
  height: 350px;
  .ant-card {
    margin-bottom: 5px;
  }
  .informationai {
    position: relative;
    height: 90px;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #57617b;
  }
}
.image {
  width: 40px;
  height: 40px;
  border: 1px solid #707070;
  border-radius: 50%;
  opacity: 1;
}
.iconPosition {
  position: absolute;
  top: -15px;
  left: -4px;
  font-size: 40px;
}
.icon-AIjiaobiao {
  color: #e99220;
}
.icon-jiejingjiaobiao {
  color: #1ccaff;
}
.icon-fankuijiaobiao {
  color: #3191ff;
}
</style>
